<template>
	<div class="placeorder" :model="orderData">

		<div class="food-info">
			<div class="card-hd"><img  class="avator" ><span class="title">桌号：{{orderData.numTable}}</span></div>
			<div v-for="item in selectedGoods" :key="item.id" class="food-item">
				<div class="food-content">
					<img  class="icon-food" :src="item.icon" />
					<div class="food-name">
						<label>{{item.name}}</label>
						<span class="number" >x{{item.count}}</span> <!-- v-if="item.count > 1" -->
					</div> 
				</div>
				<div class="mount">¥{{parseFloat(parseFloat(item.count * item.price).toFixed(2))}}</div>
			</div>
		</div>
		<div class="user-option">
			<div class="item"><label class="label">米饭：2元/人</label>  <input class="checkbox" type="checkbox" v-model="orderData.needRice" value="0"></div>
			<div class="item"><label class="label">我要外带</label> <input class="checkbox" type="checkbox" v-model="orderData.hereOrOuter" value="1"></div>
			<div class="item"><label class="label">备注</label><div class="item-remark">有忌口填这里<span class="arrow"></span></div></div>
		</div>
		<div class="user-info">
			<div class="item"><label class="label">您好，请选择就餐人数</label></div>
			<div class="item">
					<div class="scroll">
						<div class="itemnum" v-for="(item) in peoples" :key="item" 
						:class="{ active: item === orderData.numPeople }"
						@click="addPepClass(item)">{{item}}</div>
						<div  class="itemnum plus" @click="pushPeople">+</div>
					</div>
			</div>
			<div class="item"></div>
		</div>
		<div class="footer">
			<div class="box-food" @click="gofoods">继续点餐</div>
			<div class="box-order" @click="downorder">{{submitOrder}}</div>
		</div>
	</div>
</template>
<script>
import $ from 'jquery';
import { getCookie } from 'common/js/util';
  // let config = require('../../../config');
	// config = process.env.NODE_ENV === 'development' ? config.dev : config.build;

	const ERR_OK = 0;
	export default {
		data() {
			return {
				// selectedGoods: [],
				submitOrder: '下单',
				seller: {},
				peoples: [1, 2, 3, 4, 5, 6, 7, 8, 9],
				currPeoIndex: 0,
				orderData: {
					numTable: '',
					openid: '',
					numPeople: 0,
					needRice: 0,
					hereOrOuter: 0,
					remarks: '',
					items: [],
					orderId: ''// 追加点餐，订单号
				}
			};
		},
		computed: {
			selectedGoods() {
				console.log('placeorder.vue.................cartList');
				let list = this.$store.getters.cartList;
				// if (!list) {
				// 	console.log('vuex 没有取到值，从window加载');
				// 	list = JSON.parse(window.selectedGoods);
				// }
				return list;
			}
		},
		mounted() {
			this.initData();
		},
		methods: {
			initData() {
				this.orderData.openid = getCookie('openid');
				this.orderData.numTable = getCookie('num');
			},
			gofoods() {
				window.location.href = '#/goods';
			},
			test() {
				console.log(this.orderData);
			},
			downorder() {
				this.submitOrder = '提交中...';
				$('.box-order').addClass('disable');
				// window.selectedGoods = JSON.stringify(this.selectedGoods); // .css('background-color', '#ccc')
				const goods = this.selectedGoods.map(good => {
                    return {productId: good.id, productQuantity: good.count, openid: good.openid ? good.openid : getCookie('openid')};
                });
				this.orderData.items = JSON.stringify(goods);
				let url = '/buyer/order/create';
				// 订单追加明细注释
				// if (this.$store.getters.orderId) {
				// 	this.orderData.orderId = this.$store.getters.orderId;
				// 	console.log(this.orderData);
        //   url = '/buyer/order/createAdd';
        // }
				this.$axios.post(url, this.orderData
				).then((respones) => {
					respones = respones.data;
					console.log(respones);
					if (respones.code === ERR_OK) {
						this.submitOrder = '下单';
						$('.box-order').removeClass('disable');
						location.href = '#/order/' + respones.data.orderId;
					} else {
						this.submitOrder = '下单';
						$('.box-order').removeClass('disable');
						alert(respones.msg);
					}
				}).catch((err) => {
					console.log(err);
					console.log(err.data);
					this.submitOrder = '下单';
					$('.box-order').removeClass('disable');
					// location.reload();
					// this.$router.go(0); // vue自带的路由跳转：
					// window.location.href = '#/placeorder';
					alert('提交失败！');
				});
			},
			addPepClass(index) {
				this.orderData.numPeople = index;
			},
			pushPeople() {
				let arr = [this.peoples.length + 1, this.peoples.length + 2, this.peoples.length + 3];
				// arr = [parseInt(this.peoples.length + 1), parseInt(this.peoples.length + 2), parseInt(this.peoples.length + 3)];
				this.peoples = this.peoples.concat(arr);
			}
		} // methods
	};
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/mixin.styl"
	.selpeonum {
		background-color: #56d176;
	}
	.disable {
		pointer-events: none;
	}
	.placeorder {
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: #f5f5f5;
		font-size: 12px;
		.statushead {
			position: fixed;
      top: 0;
      width: 100%;
      height: 30px;
      z-index: 9;
      padding-top: 16px;
      text-align: center;
      background-color: #fff;
      margin-bottom: 5px;
      border-bottom: 1px solid rgba(7,17,27,0.1);
      .back{
				position: absolute
        top: 6px
        left: 0
        .icon-arrow_lift {
					display: block
          padding: 6px
          font-size: 20px
          color: #666
				}
			}
		}
		.user-option {
			margin: 10px 5px 20px 5px;
			background-color: #fff;
			border-radius: 15px; 
			.item {
				padding: 0 14px;
				display: flex;
				border-bottom: 1px solid #eee;
				line-height: 44px;
				.checkbox{
					width: 20px;
					height: 20px;
					margin: auto 10px;
				}
				label {
					padding-left: 4px;
					width: 100%;
					color: #333;
				}
				input {
				  line-height: 44px;
				  width: 100%;
				  outline: 0;
				  color: #333;
				}
				.item-remark{
					white-space: nowrap;
					padding-right:10px;
					color:red;
				}
				.arrow{
					width: 10px;
					height: 10px;
					border-top: 1px solid #999;
					border-right: 1px solid #999;
					transform: rotate(45deg);
					position: absolute;
					right: 15px;
					margin-top: 16px;
				}
			}
		}
		.user-info {
			margin: 10px 5px 80px 5px;
			background-color: #fff;
			border-radius: 15px; 
			.item {
				padding: 0 14px;
				display: flex;
				border-bottom: 1px solid #eee;
				line-height: 44px;
				label {
					padding-left: 4px;
					width: 100%;
					color: #333;
				}
				input {
				  line-height: 44px;
				  width: 100%;
				  outline: 0;
				  color: #333;
				}
				.scroll {
					height: 44px;
					text-align: center;
					white-space: nowrap;
					overflow-x: scroll;
					overflow-y: hidden;
					padding: 8px 0 12px 0;
					.itemnum {
						margin-right: 10px;
						width: 60px;
						height: 34px;
						line-height: 34px;
						border-radius: 25px;
						background-color: #E6E6E6;
						white-space: nowrap;
						display:inline-block;
						&.active {
							background-color: #A9F5F2;
      			}
					}
					.plus {
							position: relative;
							top: 8px;  // 前面padding: 8px 0 12px 0; 头部距离8px
							height: 34px;
						  line-height: 34px;
							font-size:34px;
							padding:0;
					}
				}
			}
		}
		.food-info {
			background-color: #fff;
			.card-hd {
				display: flex;
				align-items: center;
				padding: 14px;
				border-bottom: 1px solid #eee;
				.avator {
					width: 19px;
					height: 19px;
					margin: auto 10px;
				}
			}
			.food-item {
				padding: 0 14px;
				display: flex;
				align-items: center;
				border-bottom: 1px solid #eee;
				.food-content{
					display: flex;
					.icon-food {
						width: 50px;
						height 50px;
					}
					.food-name {
						display: flex;
						flex-direction: column;
						justify-content: center;
						margin: 4px;
						label {
							display: inline-block;
							flex: 1;
							color: #666;
						}
						.number {
							padding-left: 0px;
						}
					}
					
				}
				.mount {
					display: flex;
					flex: 1;
					justify-content: flex-end;
					
				}
			}
		}
		.footer {
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 50px;
			display: flex;
			background-color: #fff;
			
			.box-food {
				position: absolute;
				right:140px;
				width: 80px;
				height: 32px;
				margin-top: 10px;
				border-radius: 25px;
				line-height: 32px;
				text-align: center;
				right: 110px;
				width: 100px;
				border: 1px solid #E6E6E6;
			}
			.box-order {
				position: absolute;
				right:20px;
				width: 80px;
				height: 32px;
				margin-top: 10px;
				border-radius: 25px;
				line-height: 32px;
				text-align: center;
				background-color: #56d176;
			}
		}
	}


</style>
